import ltd from "./styles/ltd.module.css"
import TopNavict from "../compoments/TopNavict"
import BottomBavict from "../compoments/bottomnav"
import { useNavigate } from 'react-router-dom'

const ltd_menu = [
    {
        url:"https://jimucake.com/views/default/skin/default/images/front/shichi1.jpg",
        title:"企业免费试吃",
        id:"1",
        info:"企业免费产品体验，现已开放申请，不收取任何费用\n专业的服务团队，带来办公室的甜蜜乐趣"

    },
    {
        url:"https://jimucake.com/views/default/skin/default/images/front/enterprise_pic2.jpg",
        title:"下午茶/茶歇高级定制服务",
        id:"2",
        info:"商务茶歇服务团队，定制化的服务体验\n为您量身定做值得纪念的甜蜜时光"

    },
    {
        url:"https://jimucake.com/views/default/skin/default/images/front/dazong3.jpg",
        title:"大宗购买",
        id:"3",
        info:"企业员工福利/客户回馈伴手礼\n/企业专版福利卡片"

    },
    {
        url:"https://jimucake.com/views/default/skin/default/images/front/enterprise_pic4.jpg",
        title:"庆典蛋糕",
        id:"4",
        info:"更定制化的积慕cake，更大尺寸的甜蜜分享\n商务私飨，开业庆典，生日婚礼，有意义的纪念日\n每一个重要时刻，积慕cake都会为你定制这份专属甜蜜\n有甜蜜的事，有积慕cake\n更多定制化需求可拨打400-117-1517咨询\n"
    },
]

const Ltd = () => {
    const navigate = useNavigate();
    const artInfo = (id) =>{
        navigate("/companyInfo",{state:{id:id}});
    }
    return (
        <div className={ltd.app}>
            <div>
                <TopNavict />
                <hr />
            </div>
            <div className={ltd.ltds}>
                {
                    ltd_menu.map((item,index) => (
                        <div key={index} className={ltd.ltd_item}>
                            <div className={ltd.ltd_img}>
                                <img src={item.url} alt=""></img>
                            </div>
                            <div className={ltd.ltd_info}>
                                <div className={ltd.ltd_info_head}>
                                    <div className={ltd.ltd_info_title}>
                                        {item.title}
                                    </div>
                                    <pre>
                                        {item.info}
                                    </pre>
                                </div>
                                {item.id !== '4' ? <div className={ltd.ltd_info_img} onClick={() => artInfo(item.id)}>
                                    <img src="https://jimucake.com/views/default/skin/default/images/front/know_more.jpg" alt="" />
                                </div>:<div className={ltd.null}></div>}
                            </div>
                        </div>
                    ))
                }
            </div>
            <BottomBavict />     
        </div>
    )
}

export default Ltd